<template>
	<view class="chat-details">
		<scroll-view scroll-y="true" class="chat-body" :scroll-top="scrollTop"
			:style="{height: `calc(100% - ${up+100}upx)`,}">
			<template  v-for="item in userMessage">
			<view class="item" v-if="(item.formId==userstore.user?.id&&item.toId==toUser.id)||item.formId==toUser.id&&item.toId==userstore.user?.id">
				<view class="item__date" v-if="false">
					<text>{{item.createTime}}</text>
				</view>
				<!-- 我 -->
				<view class="isMy" v-if="item.formId==userstore.user?.id&&item.toId==toUser.id">
					<view class="item__body" v-if="item.type=='text'">
						<text>{{item.message}}</text>
					</view>
					<image class="avatar" :src="userstore.user?.avatar" mode="aspectFit" />
				</view>
				<!-- 对方 -->
				<view class="other" v-if="item.formId==toUser.id&&item.toId==userstore.user?.id">
					<image class="avatar" :src="toUser.avatar" mode="aspectFit" />
					<view class="item__outer">
						<text v-if="item.type=='text'">{{item.message}}</text>
						<image v-if="item.type=='img'" :src="item.message" mode="widthFix"
							style="width:300upx;border-radius: 10upx;" />
					</view>
					<view class=" error iconfont icon-weixin"></view>
				</view>

			</view>
			</template>
		</scroll-view>
		<!-- 100像素 +380 -->
		<BottomInput :up="up" @moveUp="moveUp" @confirm="confirm" />
	</view>
</template>

<script setup>
	import BottomInput from '@/components/chat/bottom-input.vue';
	import {
		onLoad,
		onNavigationBarButtonTap
	} from "@dcloudio/uni-app";
	import {
		ref,
		onMounted,
		provide,
		nextTick,
		watchPostEffect,
	} from 'vue';
	import userStore from '@/store/userStore.js';
	import {
		getDomFields
	} from '@/hooks/element.js';
	import {navigate} from '@/hooks/navigate.js'
	// 输入
	const sendUser = ref("")
	provide("sendUser", sendUser)
	const userstore = userStore()
	const up = ref(0)
	const scrollTop = ref(0)
	// 群聊类型
	const type = ref("")
	// 个人
	const toUser = ref()
	const userMessage = ref([{
			id: "102031",
			type: "text", //消息类型 文字 图片 
			message: "消息1",
			createTime: "2023-8-30 14:20:4", //创建时间
			formId: "1",
			toId: "123456",
			isRead: false, //是否已读
			// 我发给对方的
		},
		{
			id: "102031",
			type: "text", //消息类型 文字 图片 
			message: "消息1",
			createTime: "2023-8-30 14:20:4", //创建时间
			formId: "1",
			toId: "123456",
			isRead: false, //是否已读
			// 我发给对方的
		},
		{
			id: "102031",
			type: "text", //消息类型 文字 图片 
			message: "消息1",
			createTime: "2023-8-30 14:20:4", //创建时间
			formId: "1",
			toId: "123456",
			isRead: false, //是否已读
			// 我发给对方的
		},
		{
			id: "102031",
			type: "text", //消息类型 文字 图片 
			message: "消息1",
			createTime: "2023-8-30 14:20:4", //创建时间
			formId: "1",
			toId: "123456",
			isRead: false, //是否已读
			// 我发给对方的
		},
		{
			id: "102031",
			type: "text", //消息类型 文字 图片 
			message: "消息1",
			createTime: "2023-8-30 14:20:4", //创建时间
			formId: "1",
			toId: "123456",
			isRead: false, //是否已读
			// 我发给对方的
		}, {
			id: "102031",
			type: "text", //消息类型 文字 图片 
			message: "消息1",
			createTime: "2023-8-30 14:20:4", //创建时间
			formId: "1",
			toId: "123456",
			isRead: false, //是否已读
			// 我发给对方的
		}, {
			id: "102031",
			type: "text", //消息类型 文字 图片 
			message: "消息1",
			createTime: "2023-8-30 14:20:4", //创建时间
			formId: "1",
			toId: "123456",
			isRead: false, //是否已读
			// 我发给对方的
		}, {
			id: "102031",
			type: "text", //消息类型 文字 图片 
			message: "消息1",
			createTime: "2023-8-30 14:20:4", //创建时间
			formId: "1",
			toId: "123456",
			isRead: false, //是否已读
			// 我发给对方的
		},
		{
			id: "102031",
			type: "text", //消息类型 文字 图片 
			message: "消息1",
			createTime: "2023-8-30 14:20:4", //创建时间
			formId: "1",
			toId: "123456",
			isRead: false, //是否已读
			// 我发给对方的
		},
		{
			id: "102032",
			type: "text", //消息类型 文字 图片 
			message: "消息2",
			createTime: "2023-8-30 14:20:4", //创建时间
			formId: "123456",
			toId: "1",
			isRead: false, //是否已读
			// 对方发给我的
		},
		{
			id: "102032",
			type: "text", //消息类型 文字 图片 
			message: "消息2",
			createTime: "2023-8-30 14:20:4", //创建时间
			formId: "1",
			toId: "123456",
			isRead: false, //是否已读
			// 对方发给我的
		}
	])
	// 监听输入框的变化
	watchPostEffect((fn) => {
		if (sendUser.value.length > 0) {
			uni.setNavigationBarTitle({
				title: "正在输入中....",

			})
		} else {
			uni.setNavigationBarTitle({
				title: toUser.value.username

			})
		}
	})
	/**
	 * 发送消息
	 * @param {Object} e
	 */
	function confirm(e) {
		e.formId = userstore.user?.id;
		if(type.value==""){//个人
			e.toId = toUser.value.id;
		}else {// 群聊
			e.toId = []
		}
		userMessage.value.push(e)
		sendUser.value = ""
		nextTick(() => {
			lastBottom()
		})
	}

	/**
	 * 移动到最后
	 */
	function lastBottom() {
		getDomFields(".chat-body", {
			scrollOffset: true,
			size: true
		}).then(res => {
			scrollTop.value = res.scrollHeight - res.height + 30
		})
	}

	/** 
	 * 设置移动
	 * @param {Object} e
	 */
	function moveUp(e) {
		up.value = (up.value == 380 ? 0 : 380);
		nextTick(() => {
			setTimeout(() => {
				if (up.value == 380) {
					lastBottom()
				}
			}, 400)
		})
	}

	onMounted(() => {
		lastBottom()
	})

	onLoad((option) => {
		// 推翻 返回的都是群聊id 发送群聊id 到后端 后端
		toUser.value = JSON.parse(option.item);
		type.value = option.type??"";
		if (type == "group") { //群

		} else { // 个人
			uni.setNavigationBarTitle({
				title: toUser.value.username
			})
		}
	})
	
	onNavigationBarButtonTap((e)=>{
		if(e.index==0){//跳详情页面
			// 分组id
			navigate("/pages/chat-info/chat-info",{id:"123123"})
		}	
	})
</script>

<style lang="scss">
	.chat-details {
		height: 100%;
	}

	.chat-body {
		transition: .4s linear;
		padding: 20upx 0;
		box-sizing: border-box;
		// background-color: pink;
	}

	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20upx;
		width: 100%;
		gap: 40upx;
		box-sizing: border-box;

		&__date {
			text-align: center;

			>text {
				font-size: 16upx;
				padding: 5upx 15upx;
				border-radius: 6upx;
				background-color: #dadada;
			}
		}

		.isMy {
			display: flex;
			width: 100%;
			justify-content: flex-end;
			gap: 10upx;
		}

		.other {
			display: flex;
			width: 100%;
			justify-content: flex-start;
			gap: 10upx;
		}

		.error {
			justify-self: center;
			align-self: center;
			width: 60upx;
			height: 60upx;
		}

		.item__outer,
		.item__body {
			position: relative;
			padding: 20upx;
			border-radius: 10upx;
			max-width: 50%;
			font-size: 20upx;

			&::before {
				content: "";
				position: absolute;
				top: 20upx;
				width: 0;
				height: 0;
				border: 12upx solid transparent;
			}
		}

		.item__body {
			background-color: #cd84f1;
			margin-right: 30upx;

			&::before {
				right: 0;
				transform: translateX(100%);
				border-left-color: #cd84f1;
			}
		}

		.item__outer {
			background-color: white;
			margin-left: 30upx;

			&::before {
				left: 0;
				top: 20upx;
				transform: translateX(-100%);
				border-right-color: white;
			}
		}

		.avatar {
			width: 70upx;
			height: 70upx;
			border-radius: 10upx;
			box-shadow: 1upx 1upx 1upx rgba(0, 0, 0, .05),
				-1upx -1upx 1upx rgba(0, 0, 0, .05);
		}
	}
</style>